<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2291506" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">天然气</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">冰箱</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe86b;</span>
                <div class="name">热水器</div>
                <div class="code-name">&amp;#xe86b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe685;</span>
                <div class="name">床</div>
                <div class="code-name">&amp;#xe685;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">洗衣机</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">WIFI 我fi</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">空调</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaad;</span>
                <div class="name">天然气</div>
                <div class="code-name">&amp;#xeaad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaae;</span>
                <div class="name">消毒柜</div>
                <div class="code-name">&amp;#xeaae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe655;</span>
                <div class="name">微波炉</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe736;</span>
                <div class="name">电视机</div>
                <div class="code-name">&amp;#xe736;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">客厅餐桌</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe829;</span>
                <div class="name">家具-27</div>
                <div class="code-name">&amp;#xe829;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe830;</span>
                <div class="name">家具-41</div>
                <div class="code-name">&amp;#xe830;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe831;</span>
                <div class="name">家具-42</div>
                <div class="code-name">&amp;#xe831;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe633;</span>
                <div class="name">电视机TV</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67f;</span>
                <div class="name">天然气</div>
                <div class="code-name">&amp;#xe67f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68c;</span>
                <div class="name">洗衣机</div>
                <div class="code-name">&amp;#xe68c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe634;</span>
                <div class="name">抽油烟机</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">错号</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">错号 圆</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe698;</span>
                <div class="name">计算器</div>
                <div class="code-name">&amp;#xe698;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b3;</span>
                <div class="name">xin</div>
                <div class="code-name">&amp;#xe6b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe659;</span>
                <div class="name">扫码用户线索</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69e;</span>
                <div class="name">对号2</div>
                <div class="code-name">&amp;#xe69e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">车辆</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">火箭</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe753;</span>
                <div class="name">计算器</div>
                <div class="code-name">&amp;#xe753;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62d;</span>
                <div class="name">扫码</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">保健品资质</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64d;</span>
                <div class="name">资质良好行为</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a7;</span>
                <div class="name">对号</div>
                <div class="code-name">&amp;#xe6a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">计算器</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">单色火箭-X</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">线性铃铛</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe651;</span>
                <div class="name">3.1-降价</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">箭头</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe695;</span>
                <div class="name">箭头</div>
                <div class="code-name">&amp;#xe695;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe669;</span>
                <div class="name">箭头</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66a;</span>
                <div class="name">箭头</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe630;</span>
                <div class="name">箭头</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6aa;</span>
                <div class="name">箭头</div>
                <div class="code-name">&amp;#xe6aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">箭头 三角形</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">购物车 (1)</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65c;</span>
                <div class="name">售后</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">qq</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe650;</span>
                <div class="name">海鲜</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6da;</span>
                <div class="name">下降</div>
                <div class="code-name">&amp;#xe6da;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">海鲜</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">鸡腿</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe788;</span>
                <div class="name">鱼</div>
                <div class="code-name">&amp;#xe788;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">赞</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">零食</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
                <div class="name">购物车</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70f;</span>
                <div class="name">支付</div>
                <div class="code-name">&amp;#xe70f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65e;</span>
                <div class="name">icon_新浪-纯色logo</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">蛋糕</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">可乐瓶子</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">肉类</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">水果类</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">草莓</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">草莓</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xebc8;</span>
                <div class="name">食物-5</div>
                <div class="code-name">&amp;#xebc8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xebd3;</span>
                <div class="name">食物-34</div>
                <div class="code-name">&amp;#xebd3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xebd9;</span>
                <div class="name">食物-50</div>
                <div class="code-name">&amp;#xebd9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xebe3;</span>
                <div class="name">食物-71</div>
                <div class="code-name">&amp;#xebe3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xebfd;</span>
                <div class="name">食物-125</div>
                <div class="code-name">&amp;#xebfd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec2d;</span>
                <div class="name">食物-209</div>
                <div class="code-name">&amp;#xec2d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec2e;</span>
                <div class="name">食物-210</div>
                <div class="code-name">&amp;#xec2e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec31;</span>
                <div class="name">食物-219</div>
                <div class="code-name">&amp;#xec31;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec35;</span>
                <div class="name">食物-223</div>
                <div class="code-name">&amp;#xec35;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">购物车</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe646;</span>
                <div class="name">二维码</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe729;</span>
                <div class="name">粥</div>
                <div class="code-name">&amp;#xe729;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe742;</span>
                <div class="name">二维码</div>
                <div class="code-name">&amp;#xe742;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">电话</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bb;</span>
                <div class="name">日历</div>
                <div class="code-name">&amp;#xe6bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">奶酪</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f0;</span>
                <div class="name">货车</div>
                <div class="code-name">&amp;#xe6f0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">奶酪</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cf;</span>
                <div class="name">云</div>
                <div class="code-name">&amp;#xe6cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">支付宝</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe643;</span>
                <div class="name">厨房电器</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe700;</span>
                <div class="name">货车</div>
                <div class="code-name">&amp;#xe700;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">生鲜-蔬菜</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
                <div class="name">厨房</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">奶酪</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">手机 上传</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">厨房</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe656;</span>
                <div class="name">云</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ff;</span>
                <div class="name">货车</div>
                <div class="code-name">&amp;#xe6ff;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe665;</span>
                <div class="name">arrow-up-circle</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66c;</span>
                <div class="name">direction-up</div>
                <div class="code-name">&amp;#xe66c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67d;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xe67d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe680;</span>
                <div class="name">time</div>
                <div class="code-name">&amp;#xe680;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe689;</span>
                <div class="name">clock-filling</div>
                <div class="code-name">&amp;#xe689;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68b;</span>
                <div class="name">top-filling</div>
                <div class="code-name">&amp;#xe68b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">微信</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe660;</span>
                <div class="name">鱼</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe99b;</span>
                <div class="name">联通</div>
                <div class="code-name">&amp;#xe99b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9d9;</span>
                <div class="name">货车</div>
                <div class="code-name">&amp;#xe9d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">md-room</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">备注</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">订单</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">服务地址</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">详细地址</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61b;</span>
                <div class="name">优惠券</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">个人中心-Personal Center</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe823;</span>
                <div class="name">tool chest-fill</div>
                <div class="code-name">&amp;#xe823;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe827;</span>
                <div class="name">truck-fill</div>
                <div class="code-name">&amp;#xe827;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe88b;</span>
                <div class="name">truck</div>
                <div class="code-name">&amp;#xe88b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe632;</span>
                <div class="name">搜索-search</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe647;</span>
                <div class="name">微信-WeChat</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">购物车空</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe635;</span>
                <div class="name">客服</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
                <div class="name">购物车</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">电话</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66f;</span>
                <div class="name">24小时发货</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69c;</span>
                <div class="name">售后</div>
                <div class="code-name">&amp;#xe69c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe668;</span>
                <div class="name">电话</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe641;</span>
                <div class="name">钱</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">钱 </div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icontianranqi"></span>
            <div class="name">
              天然气
            </div>
            <div class="code-name">.icontianranqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconicon_icebox"></span>
            <div class="name">
              冰箱
            </div>
            <div class="code-name">.iconicon_icebox
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconreshuiqi"></span>
            <div class="name">
              热水器
            </div>
            <div class="code-name">.iconreshuiqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconchuang"></span>
            <div class="name">
              床
            </div>
            <div class="code-name">.iconchuang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxiyiji"></span>
            <div class="name">
              洗衣机
            </div>
            <div class="code-name">.iconxiyiji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconWIFIwofi"></span>
            <div class="name">
              WIFI 我fi
            </div>
            <div class="code-name">.iconWIFIwofi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconkongtiao"></span>
            <div class="name">
              空调
            </div>
            <div class="code-name">.iconkongtiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontianranqi1"></span>
            <div class="name">
              天然气
            </div>
            <div class="code-name">.icontianranqi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxiaodugui"></span>
            <div class="name">
              消毒柜
            </div>
            <div class="code-name">.iconxiaodugui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconweibolu"></span>
            <div class="name">
              微波炉
            </div>
            <div class="code-name">.iconweibolu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondianshiji"></span>
            <div class="name">
              电视机
            </div>
            <div class="code-name">.icondianshiji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconketingcanzhuo"></span>
            <div class="name">
              客厅餐桌
            </div>
            <div class="code-name">.iconketingcanzhuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconjiaju-"></span>
            <div class="name">
              家具-27
            </div>
            <div class="code-name">.iconjiaju-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconjiaju-1"></span>
            <div class="name">
              家具-41
            </div>
            <div class="code-name">.iconjiaju-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconjiaju-2"></span>
            <div class="name">
              家具-42
            </div>
            <div class="code-name">.iconjiaju-2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondianshijiTV"></span>
            <div class="name">
              电视机TV
            </div>
            <div class="code-name">.icondianshijiTV
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontianranqi2"></span>
            <div class="name">
              天然气
            </div>
            <div class="code-name">.icontianranqi2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxiyiji1"></span>
            <div class="name">
              洗衣机
            </div>
            <div class="code-name">.iconxiyiji1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconchouyouyanji"></span>
            <div class="name">
              抽油烟机
            </div>
            <div class="code-name">.iconchouyouyanji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconerror-1"></span>
            <div class="name">
              错号
            </div>
            <div class="code-name">.iconerror-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconcuohaoyuan"></span>
            <div class="name">
              错号 圆
            </div>
            <div class="code-name">.iconcuohaoyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon58"></span>
            <div class="name">
              计算器
            </div>
            <div class="code-name">.icon58
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxin"></span>
            <div class="name">
              xin
            </div>
            <div class="code-name">.iconxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsaomayonghuxiansuo"></span>
            <div class="name">
              扫码用户线索
            </div>
            <div class="code-name">.iconsaomayonghuxiansuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconduihao2"></span>
            <div class="name">
              对号2
            </div>
            <div class="code-name">.iconduihao2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconcheliang"></span>
            <div class="name">
              车辆
            </div>
            <div class="code-name">.iconcheliang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconicon-test1"></span>
            <div class="name">
              火箭
            </div>
            <div class="code-name">.iconicon-test1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconjisuanqi"></span>
            <div class="name">
              计算器
            </div>
            <div class="code-name">.iconjisuanqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsaoma"></span>
            <div class="name">
              扫码
            </div>
            <div class="code-name">.iconsaoma
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconbaojianpinzizhi"></span>
            <div class="name">
              保健品资质
            </div>
            <div class="code-name">.iconbaojianpinzizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzizhilianghaohangwei"></span>
            <div class="name">
              资质良好行为
            </div>
            <div class="code-name">.iconzizhilianghaohangwei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconduihao"></span>
            <div class="name">
              对号
            </div>
            <div class="code-name">.iconduihao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconjisuanqi1"></span>
            <div class="name">
              计算器
            </div>
            <div class="code-name">.iconjisuanqi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconlansehuojian-X"></span>
            <div class="name">
              单色火箭-X
            </div>
            <div class="code-name">.iconlansehuojian-X
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxianxinglingdang"></span>
            <div class="name">
              线性铃铛
            </div>
            <div class="code-name">.iconxianxinglingdang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon31jiangjia"></span>
            <div class="name">
              3.1-降价
            </div>
            <div class="code-name">.icon31jiangjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconarrow-right-copy"></span>
            <div class="name">
              箭头
            </div>
            <div class="code-name">.iconarrow-right-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconjiantouarrow483"></span>
            <div class="name">
              箭头
            </div>
            <div class="code-name">.iconjiantouarrow483
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconjiantou-copy-copy"></span>
            <div class="name">
              箭头
            </div>
            <div class="code-name">.iconjiantou-copy-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconjiantou-copy-copy-copy"></span>
            <div class="name">
              箭头
            </div>
            <div class="code-name">.iconjiantou-copy-copy-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconjiantou"></span>
            <div class="name">
              箭头
            </div>
            <div class="code-name">.iconjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconjiantouarrow486"></span>
            <div class="name">
              箭头
            </div>
            <div class="code-name">.iconjiantouarrow486
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconjiantou11"></span>
            <div class="name">
              箭头 三角形
            </div>
            <div class="code-name">.iconjiantou11
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icongouwuche1"></span>
            <div class="name">
              购物车 (1)
            </div>
            <div class="code-name">.icongouwuche1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshouhou1"></span>
            <div class="name">
              售后
            </div>
            <div class="code-name">.iconshouhou1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconqq"></span>
            <div class="name">
              qq
            </div>
            <div class="code-name">.iconqq
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconhaixian"></span>
            <div class="name">
              海鲜
            </div>
            <div class="code-name">.iconhaixian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconweb-icon-"></span>
            <div class="name">
              下降
            </div>
            <div class="code-name">.iconweb-icon-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconhaixian1"></span>
            <div class="name">
              海鲜
            </div>
            <div class="code-name">.iconhaixian1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconjitui"></span>
            <div class="name">
              鸡腿
            </div>
            <div class="code-name">.iconjitui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyu"></span>
            <div class="name">
              鱼
            </div>
            <div class="code-name">.iconyu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzan"></span>
            <div class="name">
              赞
            </div>
            <div class="code-name">.iconzan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconlingshi"></span>
            <div class="name">
              零食
            </div>
            <div class="code-name">.iconlingshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icongouwuche2"></span>
            <div class="name">
              购物车
            </div>
            <div class="code-name">.icongouwuche2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzhifu"></span>
            <div class="name">
              支付
            </div>
            <div class="code-name">.iconzhifu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconicon_xinlang-chunselogo"></span>
            <div class="name">
              icon_新浪-纯色logo
            </div>
            <div class="code-name">.iconicon_xinlang-chunselogo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondangao"></span>
            <div class="name">
              蛋糕
            </div>
            <div class="code-name">.icondangao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconkelepingzi"></span>
            <div class="name">
              可乐瓶子
            </div>
            <div class="code-name">.iconkelepingzi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-roulei"></span>
            <div class="name">
              肉类
            </div>
            <div class="code-name">.icon-roulei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuiguolei"></span>
            <div class="name">
              水果类
            </div>
            <div class="code-name">.icon-shuiguolei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconcaomei"></span>
            <div class="name">
              草莓
            </div>
            <div class="code-name">.iconcaomei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconcaomei1"></span>
            <div class="name">
              草莓
            </div>
            <div class="code-name">.iconcaomei1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshiwu-"></span>
            <div class="name">
              食物-5
            </div>
            <div class="code-name">.iconshiwu-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshiwu-1"></span>
            <div class="name">
              食物-34
            </div>
            <div class="code-name">.iconshiwu-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshiwu-2"></span>
            <div class="name">
              食物-50
            </div>
            <div class="code-name">.iconshiwu-2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshiwu-3"></span>
            <div class="name">
              食物-71
            </div>
            <div class="code-name">.iconshiwu-3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshiwu-4"></span>
            <div class="name">
              食物-125
            </div>
            <div class="code-name">.iconshiwu-4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshiwu-5"></span>
            <div class="name">
              食物-209
            </div>
            <div class="code-name">.iconshiwu-5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshiwu-6"></span>
            <div class="name">
              食物-210
            </div>
            <div class="code-name">.iconshiwu-6
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshiwu-7"></span>
            <div class="name">
              食物-219
            </div>
            <div class="code-name">.iconshiwu-7
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshiwu-8"></span>
            <div class="name">
              食物-223
            </div>
            <div class="code-name">.iconshiwu-8
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icongouwuche3"></span>
            <div class="name">
              购物车
            </div>
            <div class="code-name">.icongouwuche3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconico"></span>
            <div class="name">
              二维码
            </div>
            <div class="code-name">.iconico
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzhou"></span>
            <div class="name">
              粥
            </div>
            <div class="code-name">.iconzhou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconerweima"></span>
            <div class="name">
              二维码
            </div>
            <div class="code-name">.iconerweima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondianhua1"></span>
            <div class="name">
              电话
            </div>
            <div class="code-name">.icondianhua1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconrili"></span>
            <div class="name">
              日历
            </div>
            <div class="code-name">.iconrili
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconnailao"></span>
            <div class="name">
              奶酪
            </div>
            <div class="code-name">.iconnailao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconhuoche"></span>
            <div class="name">
              货车
            </div>
            <div class="code-name">.iconhuoche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconnailao1"></span>
            <div class="name">
              奶酪
            </div>
            <div class="code-name">.iconnailao1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyun"></span>
            <div class="name">
              云
            </div>
            <div class="code-name">.iconyun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzhifubao"></span>
            <div class="name">
              支付宝
            </div>
            <div class="code-name">.iconzhifubao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconchufangdianqi"></span>
            <div class="name">
              厨房电器
            </div>
            <div class="code-name">.iconchufangdianqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconicon-test"></span>
            <div class="name">
              货车
            </div>
            <div class="code-name">.iconicon-test
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshengxian-shucai"></span>
            <div class="name">
              生鲜-蔬菜
            </div>
            <div class="code-name">.iconshengxian-shucai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconchufang"></span>
            <div class="name">
              厨房
            </div>
            <div class="code-name">.iconchufang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconnailao2"></span>
            <div class="name">
              奶酪
            </div>
            <div class="code-name">.iconnailao2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconziyuan"></span>
            <div class="name">
              手机 上传
            </div>
            <div class="code-name">.iconziyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconchufang1"></span>
            <div class="name">
              厨房
            </div>
            <div class="code-name">.iconchufang1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyun1"></span>
            <div class="name">
              云
            </div>
            <div class="code-name">.iconyun1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconhuoche1"></span>
            <div class="name">
              货车
            </div>
            <div class="code-name">.iconhuoche1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconarrow-up-circle"></span>
            <div class="name">
              arrow-up-circle
            </div>
            <div class="code-name">.iconarrow-up-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondirection-up"></span>
            <div class="name">
              direction-up
            </div>
            <div class="code-name">.icondirection-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsearch"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.iconsearch
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontime"></span>
            <div class="name">
              time
            </div>
            <div class="code-name">.icontime
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconclock-filling"></span>
            <div class="name">
              clock-filling
            </div>
            <div class="code-name">.iconclock-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontop-filling"></span>
            <div class="name">
              top-filling
            </div>
            <div class="code-name">.icontop-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconweixin"></span>
            <div class="name">
              微信
            </div>
            <div class="code-name">.iconweixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyu1"></span>
            <div class="name">
              鱼
            </div>
            <div class="code-name">.iconyu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconliantong-full"></span>
            <div class="name">
              联通
            </div>
            <div class="code-name">.iconliantong-full
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontruck-full"></span>
            <div class="name">
              货车
            </div>
            <div class="code-name">.icontruck-full
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconmd-room"></span>
            <div class="name">
              md-room
            </div>
            <div class="code-name">.iconmd-room
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconbeizhu"></span>
            <div class="name">
              备注
            </div>
            <div class="code-name">.iconbeizhu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondingdan"></span>
            <div class="name">
              订单
            </div>
            <div class="code-name">.icondingdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfuwudizhi"></span>
            <div class="name">
              服务地址
            </div>
            <div class="code-name">.iconfuwudizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxiangxidizhi"></span>
            <div class="name">
              详细地址
            </div>
            <div class="code-name">.iconxiangxidizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyouhuiquan"></span>
            <div class="name">
              优惠券
            </div>
            <div class="code-name">.iconyouhuiquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icongerenzhongxin-PersonalCenter"></span>
            <div class="name">
              个人中心-Personal Center
            </div>
            <div class="code-name">.icongerenzhongxin-PersonalCenter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontoolchest-fill"></span>
            <div class="name">
              tool chest-fill
            </div>
            <div class="code-name">.icontoolchest-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontruck-fill"></span>
            <div class="name">
              truck-fill
            </div>
            <div class="code-name">.icontruck-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontruck"></span>
            <div class="name">
              truck
            </div>
            <div class="code-name">.icontruck
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsousuo-search"></span>
            <div class="name">
              搜索-search
            </div>
            <div class="code-name">.iconsousuo-search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconweixin-WeChat"></span>
            <div class="name">
              微信-WeChat
            </div>
            <div class="code-name">.iconweixin-WeChat
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icongouwuchekong"></span>
            <div class="name">
              购物车空
            </div>
            <div class="code-name">.icongouwuchekong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconkefu"></span>
            <div class="name">
              客服
            </div>
            <div class="code-name">.iconkefu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icongouwuche"></span>
            <div class="name">
              购物车
            </div>
            <div class="code-name">.icongouwuche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondianhua"></span>
            <div class="name">
              电话
            </div>
            <div class="code-name">.icondianhua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon24xiaoshifahuo"></span>
            <div class="name">
              24小时发货
            </div>
            <div class="code-name">.icon24xiaoshifahuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshouhou"></span>
            <div class="name">
              售后
            </div>
            <div class="code-name">.iconshouhou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconai-tel"></span>
            <div class="name">
              电话
            </div>
            <div class="code-name">.iconai-tel
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconqian4"></span>
            <div class="name">
              钱
            </div>
            <div class="code-name">.iconqian4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconqian"></span>
            <div class="name">
              钱 
            </div>
            <div class="code-name">.iconqian
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont iconxxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontianranqi"></use>
                </svg>
                <div class="name">天然气</div>
                <div class="code-name">#icontianranqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconicon_icebox"></use>
                </svg>
                <div class="name">冰箱</div>
                <div class="code-name">#iconicon_icebox</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconreshuiqi"></use>
                </svg>
                <div class="name">热水器</div>
                <div class="code-name">#iconreshuiqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconchuang"></use>
                </svg>
                <div class="name">床</div>
                <div class="code-name">#iconchuang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxiyiji"></use>
                </svg>
                <div class="name">洗衣机</div>
                <div class="code-name">#iconxiyiji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconWIFIwofi"></use>
                </svg>
                <div class="name">WIFI 我fi</div>
                <div class="code-name">#iconWIFIwofi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconkongtiao"></use>
                </svg>
                <div class="name">空调</div>
                <div class="code-name">#iconkongtiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontianranqi1"></use>
                </svg>
                <div class="name">天然气</div>
                <div class="code-name">#icontianranqi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxiaodugui"></use>
                </svg>
                <div class="name">消毒柜</div>
                <div class="code-name">#iconxiaodugui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconweibolu"></use>
                </svg>
                <div class="name">微波炉</div>
                <div class="code-name">#iconweibolu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondianshiji"></use>
                </svg>
                <div class="name">电视机</div>
                <div class="code-name">#icondianshiji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconketingcanzhuo"></use>
                </svg>
                <div class="name">客厅餐桌</div>
                <div class="code-name">#iconketingcanzhuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconjiaju-"></use>
                </svg>
                <div class="name">家具-27</div>
                <div class="code-name">#iconjiaju-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconjiaju-1"></use>
                </svg>
                <div class="name">家具-41</div>
                <div class="code-name">#iconjiaju-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconjiaju-2"></use>
                </svg>
                <div class="name">家具-42</div>
                <div class="code-name">#iconjiaju-2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondianshijiTV"></use>
                </svg>
                <div class="name">电视机TV</div>
                <div class="code-name">#icondianshijiTV</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontianranqi2"></use>
                </svg>
                <div class="name">天然气</div>
                <div class="code-name">#icontianranqi2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxiyiji1"></use>
                </svg>
                <div class="name">洗衣机</div>
                <div class="code-name">#iconxiyiji1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconchouyouyanji"></use>
                </svg>
                <div class="name">抽油烟机</div>
                <div class="code-name">#iconchouyouyanji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconerror-1"></use>
                </svg>
                <div class="name">错号</div>
                <div class="code-name">#iconerror-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconcuohaoyuan"></use>
                </svg>
                <div class="name">错号 圆</div>
                <div class="code-name">#iconcuohaoyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon58"></use>
                </svg>
                <div class="name">计算器</div>
                <div class="code-name">#icon58</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxin"></use>
                </svg>
                <div class="name">xin</div>
                <div class="code-name">#iconxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsaomayonghuxiansuo"></use>
                </svg>
                <div class="name">扫码用户线索</div>
                <div class="code-name">#iconsaomayonghuxiansuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconduihao2"></use>
                </svg>
                <div class="name">对号2</div>
                <div class="code-name">#iconduihao2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconcheliang"></use>
                </svg>
                <div class="name">车辆</div>
                <div class="code-name">#iconcheliang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconicon-test1"></use>
                </svg>
                <div class="name">火箭</div>
                <div class="code-name">#iconicon-test1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconjisuanqi"></use>
                </svg>
                <div class="name">计算器</div>
                <div class="code-name">#iconjisuanqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsaoma"></use>
                </svg>
                <div class="name">扫码</div>
                <div class="code-name">#iconsaoma</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconbaojianpinzizhi"></use>
                </svg>
                <div class="name">保健品资质</div>
                <div class="code-name">#iconbaojianpinzizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzizhilianghaohangwei"></use>
                </svg>
                <div class="name">资质良好行为</div>
                <div class="code-name">#iconzizhilianghaohangwei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconduihao"></use>
                </svg>
                <div class="name">对号</div>
                <div class="code-name">#iconduihao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconjisuanqi1"></use>
                </svg>
                <div class="name">计算器</div>
                <div class="code-name">#iconjisuanqi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconlansehuojian-X"></use>
                </svg>
                <div class="name">单色火箭-X</div>
                <div class="code-name">#iconlansehuojian-X</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxianxinglingdang"></use>
                </svg>
                <div class="name">线性铃铛</div>
                <div class="code-name">#iconxianxinglingdang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon31jiangjia"></use>
                </svg>
                <div class="name">3.1-降价</div>
                <div class="code-name">#icon31jiangjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconarrow-right-copy"></use>
                </svg>
                <div class="name">箭头</div>
                <div class="code-name">#iconarrow-right-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconjiantouarrow483"></use>
                </svg>
                <div class="name">箭头</div>
                <div class="code-name">#iconjiantouarrow483</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconjiantou-copy-copy"></use>
                </svg>
                <div class="name">箭头</div>
                <div class="code-name">#iconjiantou-copy-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconjiantou-copy-copy-copy"></use>
                </svg>
                <div class="name">箭头</div>
                <div class="code-name">#iconjiantou-copy-copy-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconjiantou"></use>
                </svg>
                <div class="name">箭头</div>
                <div class="code-name">#iconjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconjiantouarrow486"></use>
                </svg>
                <div class="name">箭头</div>
                <div class="code-name">#iconjiantouarrow486</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconjiantou11"></use>
                </svg>
                <div class="name">箭头 三角形</div>
                <div class="code-name">#iconjiantou11</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icongouwuche1"></use>
                </svg>
                <div class="name">购物车 (1)</div>
                <div class="code-name">#icongouwuche1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshouhou1"></use>
                </svg>
                <div class="name">售后</div>
                <div class="code-name">#iconshouhou1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconqq"></use>
                </svg>
                <div class="name">qq</div>
                <div class="code-name">#iconqq</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconhaixian"></use>
                </svg>
                <div class="name">海鲜</div>
                <div class="code-name">#iconhaixian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconweb-icon-"></use>
                </svg>
                <div class="name">下降</div>
                <div class="code-name">#iconweb-icon-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconhaixian1"></use>
                </svg>
                <div class="name">海鲜</div>
                <div class="code-name">#iconhaixian1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconjitui"></use>
                </svg>
                <div class="name">鸡腿</div>
                <div class="code-name">#iconjitui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyu"></use>
                </svg>
                <div class="name">鱼</div>
                <div class="code-name">#iconyu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzan"></use>
                </svg>
                <div class="name">赞</div>
                <div class="code-name">#iconzan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconlingshi"></use>
                </svg>
                <div class="name">零食</div>
                <div class="code-name">#iconlingshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icongouwuche2"></use>
                </svg>
                <div class="name">购物车</div>
                <div class="code-name">#icongouwuche2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzhifu"></use>
                </svg>
                <div class="name">支付</div>
                <div class="code-name">#iconzhifu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconicon_xinlang-chunselogo"></use>
                </svg>
                <div class="name">icon_新浪-纯色logo</div>
                <div class="code-name">#iconicon_xinlang-chunselogo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondangao"></use>
                </svg>
                <div class="name">蛋糕</div>
                <div class="code-name">#icondangao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconkelepingzi"></use>
                </svg>
                <div class="name">可乐瓶子</div>
                <div class="code-name">#iconkelepingzi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-roulei"></use>
                </svg>
                <div class="name">肉类</div>
                <div class="code-name">#icon-roulei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuiguolei"></use>
                </svg>
                <div class="name">水果类</div>
                <div class="code-name">#icon-shuiguolei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconcaomei"></use>
                </svg>
                <div class="name">草莓</div>
                <div class="code-name">#iconcaomei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconcaomei1"></use>
                </svg>
                <div class="name">草莓</div>
                <div class="code-name">#iconcaomei1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshiwu-"></use>
                </svg>
                <div class="name">食物-5</div>
                <div class="code-name">#iconshiwu-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshiwu-1"></use>
                </svg>
                <div class="name">食物-34</div>
                <div class="code-name">#iconshiwu-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshiwu-2"></use>
                </svg>
                <div class="name">食物-50</div>
                <div class="code-name">#iconshiwu-2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshiwu-3"></use>
                </svg>
                <div class="name">食物-71</div>
                <div class="code-name">#iconshiwu-3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshiwu-4"></use>
                </svg>
                <div class="name">食物-125</div>
                <div class="code-name">#iconshiwu-4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshiwu-5"></use>
                </svg>
                <div class="name">食物-209</div>
                <div class="code-name">#iconshiwu-5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshiwu-6"></use>
                </svg>
                <div class="name">食物-210</div>
                <div class="code-name">#iconshiwu-6</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshiwu-7"></use>
                </svg>
                <div class="name">食物-219</div>
                <div class="code-name">#iconshiwu-7</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshiwu-8"></use>
                </svg>
                <div class="name">食物-223</div>
                <div class="code-name">#iconshiwu-8</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icongouwuche3"></use>
                </svg>
                <div class="name">购物车</div>
                <div class="code-name">#icongouwuche3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconico"></use>
                </svg>
                <div class="name">二维码</div>
                <div class="code-name">#iconico</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzhou"></use>
                </svg>
                <div class="name">粥</div>
                <div class="code-name">#iconzhou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconerweima"></use>
                </svg>
                <div class="name">二维码</div>
                <div class="code-name">#iconerweima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondianhua1"></use>
                </svg>
                <div class="name">电话</div>
                <div class="code-name">#icondianhua1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconrili"></use>
                </svg>
                <div class="name">日历</div>
                <div class="code-name">#iconrili</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconnailao"></use>
                </svg>
                <div class="name">奶酪</div>
                <div class="code-name">#iconnailao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconhuoche"></use>
                </svg>
                <div class="name">货车</div>
                <div class="code-name">#iconhuoche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconnailao1"></use>
                </svg>
                <div class="name">奶酪</div>
                <div class="code-name">#iconnailao1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyun"></use>
                </svg>
                <div class="name">云</div>
                <div class="code-name">#iconyun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzhifubao"></use>
                </svg>
                <div class="name">支付宝</div>
                <div class="code-name">#iconzhifubao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconchufangdianqi"></use>
                </svg>
                <div class="name">厨房电器</div>
                <div class="code-name">#iconchufangdianqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconicon-test"></use>
                </svg>
                <div class="name">货车</div>
                <div class="code-name">#iconicon-test</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshengxian-shucai"></use>
                </svg>
                <div class="name">生鲜-蔬菜</div>
                <div class="code-name">#iconshengxian-shucai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconchufang"></use>
                </svg>
                <div class="name">厨房</div>
                <div class="code-name">#iconchufang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconnailao2"></use>
                </svg>
                <div class="name">奶酪</div>
                <div class="code-name">#iconnailao2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconziyuan"></use>
                </svg>
                <div class="name">手机 上传</div>
                <div class="code-name">#iconziyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconchufang1"></use>
                </svg>
                <div class="name">厨房</div>
                <div class="code-name">#iconchufang1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyun1"></use>
                </svg>
                <div class="name">云</div>
                <div class="code-name">#iconyun1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconhuoche1"></use>
                </svg>
                <div class="name">货车</div>
                <div class="code-name">#iconhuoche1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconarrow-up-circle"></use>
                </svg>
                <div class="name">arrow-up-circle</div>
                <div class="code-name">#iconarrow-up-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondirection-up"></use>
                </svg>
                <div class="name">direction-up</div>
                <div class="code-name">#icondirection-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsearch"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#iconsearch</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontime"></use>
                </svg>
                <div class="name">time</div>
                <div class="code-name">#icontime</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconclock-filling"></use>
                </svg>
                <div class="name">clock-filling</div>
                <div class="code-name">#iconclock-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontop-filling"></use>
                </svg>
                <div class="name">top-filling</div>
                <div class="code-name">#icontop-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconweixin"></use>
                </svg>
                <div class="name">微信</div>
                <div class="code-name">#iconweixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyu1"></use>
                </svg>
                <div class="name">鱼</div>
                <div class="code-name">#iconyu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconliantong-full"></use>
                </svg>
                <div class="name">联通</div>
                <div class="code-name">#iconliantong-full</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontruck-full"></use>
                </svg>
                <div class="name">货车</div>
                <div class="code-name">#icontruck-full</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconmd-room"></use>
                </svg>
                <div class="name">md-room</div>
                <div class="code-name">#iconmd-room</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconbeizhu"></use>
                </svg>
                <div class="name">备注</div>
                <div class="code-name">#iconbeizhu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondingdan"></use>
                </svg>
                <div class="name">订单</div>
                <div class="code-name">#icondingdan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfuwudizhi"></use>
                </svg>
                <div class="name">服务地址</div>
                <div class="code-name">#iconfuwudizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxiangxidizhi"></use>
                </svg>
                <div class="name">详细地址</div>
                <div class="code-name">#iconxiangxidizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyouhuiquan"></use>
                </svg>
                <div class="name">优惠券</div>
                <div class="code-name">#iconyouhuiquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icongerenzhongxin-PersonalCenter"></use>
                </svg>
                <div class="name">个人中心-Personal Center</div>
                <div class="code-name">#icongerenzhongxin-PersonalCenter</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontoolchest-fill"></use>
                </svg>
                <div class="name">tool chest-fill</div>
                <div class="code-name">#icontoolchest-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontruck-fill"></use>
                </svg>
                <div class="name">truck-fill</div>
                <div class="code-name">#icontruck-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontruck"></use>
                </svg>
                <div class="name">truck</div>
                <div class="code-name">#icontruck</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsousuo-search"></use>
                </svg>
                <div class="name">搜索-search</div>
                <div class="code-name">#iconsousuo-search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconweixin-WeChat"></use>
                </svg>
                <div class="name">微信-WeChat</div>
                <div class="code-name">#iconweixin-WeChat</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icongouwuchekong"></use>
                </svg>
                <div class="name">购物车空</div>
                <div class="code-name">#icongouwuchekong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconkefu"></use>
                </svg>
                <div class="name">客服</div>
                <div class="code-name">#iconkefu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icongouwuche"></use>
                </svg>
                <div class="name">购物车</div>
                <div class="code-name">#icongouwuche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondianhua"></use>
                </svg>
                <div class="name">电话</div>
                <div class="code-name">#icondianhua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon24xiaoshifahuo"></use>
                </svg>
                <div class="name">24小时发货</div>
                <div class="code-name">#icon24xiaoshifahuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshouhou"></use>
                </svg>
                <div class="name">售后</div>
                <div class="code-name">#iconshouhou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconai-tel"></use>
                </svg>
                <div class="name">电话</div>
                <div class="code-name">#iconai-tel</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconqian4"></use>
                </svg>
                <div class="name">钱</div>
                <div class="code-name">#iconqian4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconqian"></use>
                </svg>
                <div class="name">钱 </div>
                <div class="code-name">#iconqian</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
